<template>
    <div>
        <el-button type="success" @click="isShowDialog('insert')" icon="el-icon-plus">新增</el-button>
        <el-input placeholder="请输入关键字" v-model="keywords" class="input-with-select">
            <el-button slot="append" type="primary" icon="el-icon-search" class="searchBtn" @click="searchBtn"></el-button>
        </el-input>

        <!-- 查询 -->
        <!-- 搜索 -->
        <!-- 表格 -->
        <el-table :data="tabaleData" :highlight-current-row="true" stripe border class="table-index"  style="width: 100%;" :height="tableHeight"
        :header-cell-style="getRowClass" v-loading="loading">
            <el-table-column fixed type="index" label="*"  sortable min-width="40"></el-table-column>
            <el-table-column prop="code" label="供应商编号" sortable   min-width="100"></el-table-column>
            <el-table-column prop="name" label="供应商名字" sortable  show-overflow-tooltip min-width="160"></el-table-column>
            <el-table-column prop="contacts" label="联系人" sortable min-width="85"></el-table-column>
            <el-table-column prop="phone" label="联系电话" sortable   min-width="120"></el-table-column>
            <el-table-column prop="qualityMoney" label="质保金"  sortable min-width="90"></el-table-column>
            <el-table-column prop="paymentMethodName" label="付款方式" sortable  min-width="90"></el-table-column>
            <el-table-column prop="paymentPeriod" label="付款周期" sortable   min-width="90"></el-table-column>
            <el-table-column prop="transporttationMethodName" sortable label="运输方式"   min-width="90"></el-table-column>
            <el-table-column prop="oweMoney" label="欠款" sortable  width="80"></el-table-column>
            <el-table-column prop="oweTicket" label="欠票"  sortable width="80"></el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="100">
                <template slot-scope="scope">
                    <el-button @click="isShowDialog('update',scope.row)" type="text" size="mini">编辑</el-button>
                    <el-button @click="isShowDialog1(scope.row)" type="text" size="mini">记录</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
         <!-- 基础信息编辑 -->

        <el-dialog :title="dialog.title" width="800px" center :visible.sync="dialog.isShow" :close-on-click-modal="false" v-dialogDrag>
            <div :style="tableDialogHeightTabPane">
            <h3 class="dialog-plate-title">基础信息</h3>
            <el-form :inline="true" class="demo-form-inline" v-model="dialogList" label-position="right" label-width="120px">
                <el-form-item label="供应商编号"><el-input v-model="dialogList.code"></el-input></el-form-item>
                <el-form-item label="供应商名字"><el-input v-model="dialogList.name" ></el-input></el-form-item>
                <el-form-item label="联系人"><el-input v-model="dialogList.contacts" ></el-input></el-form-item>
                <el-form-item label="联系电话"><el-input v-model="dialogList.phone" ></el-input></el-form-item>
                <el-form-item label="地址"><el-input v-model="dialogList.address" ></el-input></el-form-item>
                <el-form-item label="传真"><el-input v-model="dialogList.fax" ></el-input></el-form-item>
                <el-form-item label="邮箱"><el-input v-model="dialogList.email" ></el-input></el-form-item>
                <el-form-item label="开户行"><el-input v-model="dialogList.openingBank" ></el-input></el-form-item>
                <el-form-item label="账户"><el-input v-model="dialogList.account" ></el-input></el-form-item>
                <el-form-item label="税号"><el-input v-model="dialogList.tax" ></el-input></el-form-item>
                <el-form-item label="质保金"><el-input v-model="dialogList.qualityMoney" ></el-input></el-form-item>
                <el-form-item label="付款方式">
                     <el-select v-model="dialogList.paymentMethod" placeholder="请选择发票类型">
                        <el-option :label="item.name" :value="item.code" v-for="item in payTypeList" :key="item.label"></el-option>
                    </el-select>
                </el-form-item>
                 <el-form-item label="预付款比例" v-show="dialogList.paymentMethod===1">
                     <el-input v-model="dialogList.advanceSum"><el-button slot="append">%</el-button></el-input>
                </el-form-item>
                <el-form-item label="付款周期" v-if='dialogList.paymentMethod !==4'>
                    <el-input v-model="dialogList.paymentPeriod" class="inputSuffix"><el-button slot="append" >天</el-button></el-input>
                </el-form-item>
                <el-form-item label="每月日期" v-else>
                    <el-input v-model="dialogList.paymentPeriod" class="inputSuffix"><el-button slot="append" >号</el-button></el-input>
                </el-form-item>
                 <el-form-item label="运输方式">
                     <el-select v-model="dialogList.transporttationMethod" placeholder="请选择运输方式">
                        <el-option :label="item.name" :value="item.code" v-for="item in shippingMethodList" :key="item.label"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="场地面积"><el-input v-model="dialogList.siteSize" ></el-input></el-form-item>
                <el-form-item label="人数"><el-input v-model="dialogList.peopleNums" ></el-input></el-form-item>
                <el-form-item label="设备数量"><el-input v-model="dialogList.equipmentNums" ></el-input></el-form-item>
                <el-form-item label="属性"><el-input v-model="dialogList.property" ></el-input></el-form-item>
                <el-form-item label="关键工艺"><el-input v-model="dialogList.cruxCraft" ></el-input></el-form-item>
                <el-form-item label="设计能力">
                    <el-select v-model="dialogList.isDesignAbility" placeholder="请选择">
                        <el-option :label="item.label" :value="item.value" v-for="item in isDesignAbilityList" :key="item.label"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="发票类型">
                    <el-select v-model="dialogList.makeInvoiceType" placeholder="请选择发票类型">
                        <el-option :label="item.name" :value="item.code" v-for="item in invoiceList" :key="item.label"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="欠款"><el-input v-model="dialogList.oweMoney" v-if="dialog.title==='编辑'" disabled></el-input></el-form-item>
                <el-form-item label="欠票"><el-input v-model="dialogList.oweTicket" v-if="dialog.title==='编辑'" disabled></el-input></el-form-item>
            </el-form>
            <h3 class="dialog-plate-title">营业执照和税务登记证照</h3>
            <el-row>
                <el-col :span="12" class="uploadImg">
                    <el-upload
                        class="avatar-uploader"
                        :action="actionUrl"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess1"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="dialogList.businessLicensePhoto" :src="dialogList.businessLicensePhoto" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon">营业执照</i>
                    </el-upload>
                </el-col>
                <el-col :span="12" class="uploadImg">
                    <el-upload
                        class="avatar-uploader"
                        :action="actionUrl"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess2"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="dialogList.taxPhoto" :src="dialogList.taxPhoto" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon">税务登记证照</i>
                    </el-upload>
                </el-col>
            </el-row>
            <h3 class="dialog-plate-title">医疗相关资质和其他资质</h3>
                <el-row>
                    <el-col :span="12" class="uploadImg">
                        <el-upload
                            class="avatar-uploader"
                            :action="actionUrl"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess3"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="dialogList.treatmentCorrelation" :src="dialogList.treatmentCorrelation" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon">医疗相关资质</i>
                        </el-upload>
                    </el-col>
                    <el-col :span="12" class="uploadImg">
                        <el-upload
                            class="avatar-uploader"
                            :action="actionUrl"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess4"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="dialogList.otherQualification" :src="dialogList.otherQualification" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon">其他资质</i>
                        </el-upload>
                    </el-col>
                </el-row>

                </div>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="submitList" type="primary">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="dialog1.title" width="900px" center :visible.sync="dialog1.isShow" :close-on-click-modal="false" v-dialogDrag>
             <el-tabs v-model="dialog1.activeName" @tab-click="handleClick">
                <el-tab-pane label="欠款记录" name="1">
                   <el-button type="success" @click="isShowDialog2()" icon="el-icon-plus">新增</el-button>
                    <el-table :data="dialog1.oweMoneyList" :highlight-current-row="true" stripe border class="table-index"  style="width: 100%;"
                    :header-cell-style="getRowClass">
                        <el-table-column fixed type="index" label="*"  sortable min-width="40"></el-table-column>
                        <el-table-column prop="lastNums" label="上次欠款" sortable   min-width="100"></el-table-column>
                         <el-table-column prop="nums" label="本次欠款" sortable  show-overflow-tooltip min-width="160"></el-table-column>
                        <el-table-column prop="nowNums" label="剩余欠款" sortable  show-overflow-tooltip min-width="160"></el-table-column>
                        <el-table-column prop="creatorName" label="创建者" sortable   min-width="100"></el-table-column>
                        <el-table-column prop="createTime" label="创建时间" sortable  show-overflow-tooltip min-width="160"></el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="欠票记录" name="2">
                    <el-button type="success" @click="isShowDialog2()" icon="el-icon-plus">新增</el-button>
                    <el-table :data="dialog1.oweTicketList" :highlight-current-row="true" stripe border class="table-index"  style="width: 100%;"
                :header-cell-style="getRowClass">
                    <el-table-column fixed type="index" label="*"  sortable min-width="40"></el-table-column>
                    <el-table-column prop="lastNums" label="上次票数" sortable   min-width="100"></el-table-column>
                    <el-table-column prop="nums" label="本次票数" sortable  show-overflow-tooltip min-width="160"></el-table-column>
                    <el-table-column prop="nowNums" label="剩余票数" sortable  show-overflow-tooltip min-width="160"></el-table-column>
                    <el-table-column prop="creatorName" label="创建者" sortable   min-width="100"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间" sortable  show-overflow-tooltip min-width="160"></el-table-column>
                </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
        <el-dialog :title="dialog2.title" width="800px" center :visible.sync="dialog2.isShow" :close-on-click-modal="false" v-dialogDrag>
            <el-form :inline="true" class="demo-form-inline" v-model="dialog2.formData" label-position="right" label-width="120px">
                <el-form-item :label="dialog2.formData.type==='1'?'本次欠款':'本次欠票'"><el-input v-model="dialog2.formData.nums"></el-input></el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="submitList1" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import cgbHttp from '@/axios/cgbHttp.js'
import baseHttp from '@/axios/baseHttp.js'

export default {
    data(){
        return {
            type:2,
            invoiceList:[],/**all发票类型列表 */
            payTypeList:[],/**all付款方式列表 */
            shippingMethodList:[],/*all运输方式列表*/
            tableHeight: document.documentElement.clientHeight - 170,/**表格高度 */
            loading:false,/**加载参数 */
            tabaleData:[],/**表格数据列表 */
            keywords:'',/**关键字 */
            actionUrl:baseHttp.imgUpload(),/**图片上传接口 */
            dialog:{/**弹框配置 */
                title:'',
                isShow:false,
            },
            dialogList:{},
            tableDialogHeightTabPane:{/**dialog style */
                height: (document.documentElement.clientHeight - 300) + 'px',
                overflowY: 'auto'
            },
            isDesignAbilityList:[/**有无设计能力选项 */
                {
                    label:'有',
                    value:'1'
                },
                {
                    label:'无',
                    value:'0'
                }
            ],
            pagination:{/**分页 */
                pageSize:10,
                currentPage:1,
                total:0
            },
            dialog1:{
                title:'',
                isShow:false,
                sid:'',
                activeName:'1',
                oweMoneyList:[],
                oweTicketList:[]
            },
            dialog2:{
                title:'',
                isShow:false,
                formData:{}
            }
        }
    },
    created(){
        let  self = this;
         cgbHttp.supplierCode(5).then(res=>{
            /**获取发票类型 */
            self.invoiceList = res.content;
        })
        cgbHttp.supplierCode(6).then(res=>{
             /**获取付款方式 */
             res.content.forEach(element => {
                element.code = Number( element.code)
            });
            self.payTypeList = res.content;
        })
        cgbHttp.supplierCode(7).then(res=>{
             /**获取运输方式 */
              res.content.forEach(item=>{
                  item.code = Number(item.code );
              })
            self.shippingMethodList = res.content;
        })
        self.getTableDate();
    },
    methods:{
        getTableDate(){/**获取表格内容 */
            let self = this;
            let params={
                currentPage:self.pagination.currentPage,
                pageSize:self.pagination.pageSize,
                name:self.keywords,
                type:self.type
            }
            self.loading=true;
            cgbHttp.supplierList(params).then(res=>{
                self.loading=false;
                self.tabaleData = res.content.records;
                self.pagination.total=res.content.total
            },error=>{
                 self.loading=false;
            })
        },
        handleSizeChange(size){/**改变分页条数 */
            this.pagination.pageSize=size;
            this.pagination.currentPage=1;
            this.getTableDate()
        },
        handleCurrentChange(current){/**改变分页页码 */
            this.pagination.currentPage = current;
            this.getTableDate();
        },
        searchBtn(){/**点击搜索 */
            this.pagination.currentPage=1;
            this.getTableDate();
        },
        isShowDialog(type,row){/**点击弹出新增或编辑弹框 */
            let self = this;
            self.dialog.isShow=true;
            self.dialog.title= type==="insert"?"新增":"编辑";
            if(type==="insert"){
             self.dialogList={
                code:null,
                name:null,
                contacts:null,
                account:'',
                businessLicensePhoto:null,
                contacts:null,
                address:null,
                email:null,
                cruxCraft:null,
                equipmentNums:null,
                fax:null,
                isDesignAbility:'',
                kernelProduct:null,
                letter:null,
                openingBank:null,
                otherQualification:null,
                peopleNums:null,
                phone:null,
                property:null,
                qualityMoney:null,
                signedPerson:null,
                signedTime:null,
                siteSize:null,
                tax:null,
                taxPhoto:null,
                treatmentCorrelation:null,
                advanceSum:null,
                paymentMethod:null,
                paymentPeriod:null,
                transporttationMethod:null,
                makeInvoiceType:null
             }
            }else{
                self.dialogList=row;
                self.dialogList.isDesignAbility=self.dialogList.isDesignAbility?String(self.dialogList.isDesignAbility):'';
            }

        },
        beforeAvatarUpload(file){/**图片上传前图片大小验证*/
            const isJPG = file.type.substr(0,5) === 'image';
            const isLt10M = file.size / 1024 / 1024 < 10;
            if (!isJPG) {
                this.$message.error('只能上传图片!');
            }
            if (!isLt10M) {
                this.$message.error('上传头像图片大小不能超过 10MB!');
            }
            return isJPG && isLt10M
        },
        handleAvatarSuccess1(response, file, fileList){
            this.dialogList.businessLicensePhoto = response;
        },
        handleAvatarSuccess2(response, file, fileList){
             this.dialogList.taxPhoto = response;
        },
         handleAvatarSuccess3(response, file, fileList){
            this.dialogList.treatmentCorrelation = response;
        },
        handleAvatarSuccess4(response, file, fileList){
             this.dialogList.otherQualification = response;
        },
        submitList(){/**新增或编辑供应商基础信息 */
            let self = this;
            let type = self.dialog.title==="新增"?'insert':'update';
            self.dialogList.type=2;
            cgbHttp.addUpdateSupplier(type,self.dialogList).then(res=>{
                self.dialog.isShow=false;
                self.getTableDate();
                self.$message.success(`${self.dialog.title}成功`);
            },error=>{
                 self.$message.error(`${self.dialog.title}失败`)
            })
        },
        isShowDialog1(row){
            let self = this;
            self.dialog1.title="记录详情";
            self.dialog1.isShow = true;
            self.dialog1.activeName="1";
            self.dialog1.sid = row.id;
            self.getOwnList();
        },
        handleClick(tab, event){
            let  self= this;
            self.getOwnList();
        },
        getOwnList(){
            let self = this;
            cgbHttp.oweList(self.dialog1.sid,self.dialog1.activeName).then(res=>{
               self.dialog1.activeName==='1' ? self.dialog1.oweMoneyList=res.content:self.dialog1.oweTicketList=res.content
            })
        },
        isShowDialog2(){
            let self = this;
            self.dialog2.title = self.dialog1.activeName==='1'?'新增欠款记录':'新增欠票记录';
            self.dialog2.isShow = true;
            self.dialog2.formData={
                sid:self.dialog1.sid,
                nums:'',
                type:self.dialog1.activeName
            }
        },
        submitList1(){
            let self = this;
            cgbHttp.addOweRecord(self.dialog2.formData).then(res=>{
                self.dialog2.isShow=false;
                 self.getOwnList();
            })
        }
    }
}
</script>
<style scoped>
.input-with-select{
    width:240px;
}
.searchBtn{
    background: #409eff !important;
    color:#fff !important;
}
.uploadImg{
    height:200px;
    overflow: hidden;
    padding:10px 24px;
    box-sizing: border-box;
}
.uploadImg .avatar-uploader{
    height:100%;
    text-align: center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.uploadImg .avatar-uploader:hover{
border-color: #409EFF;
}
.uploadImg .avatar-uploader .el-icon-plus::before{
    display: block;
    font-size: 24px;
    margin-top:67px;
}
.avatar {
    max-width: 100%;
    max-height:180px ;
    display: block;
    margin:auto;
  }

</style>
